<template>
  <div style="height: 374px; opacity: 1" class="piechart" />
</template>

<script>
import echarts from 'echarts'
import resize from '@/views/dashboard/components/mixins/resize'
import { AjaxToken } from '@/api/common'
import { AjaxGet } from '@/api/common'
import { Loading } from 'element-ui'
import 'url-search-params-polyfill'
export default {
  mixins: [resize],
  props: {
    cpnID:"",
    chnanelId:"",
    stDt: "",
    edDt:"" ,
    refsh:"",
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart.dispose()
        this.initChart()
      }
    },
    CpnID: {
      deep: true,
      handler(val) {
        this.chart = null
        this.initChart()
      }
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.chart = null
        this.initChart()
      }
    },
    StDt: {
      deep: true,
      handler(val) {
        this.chart = null
        this.initChart()
      }
    },
    EdDt: {
      deep: true,
      handler(val) {
        this.chart = null
        this.initChart()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions(this)
    },
    setOptions(thisobj) {
      this.Seach()
    },
    Seach() {
      var params = new URLSearchParams()
      params.append('CpnID', this.CpnID)
      params.append('StDt', this.StDt)
      params.append('EdDt', this.EdDt)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',

        target: document.querySelector('.piechart')
      })
      backstage.GetPieChart(this, params, loading)
    }
  }
}
var backstage = {
  // 获取Mngrbaseinfo集合
  GetPieChart: function(thisobj, params, loading) {
    setTimeout(function() {
      AjaxToken(
        thisobj,
        'GetPieChart',
        params,
        'post',
        function(res) {
          console.log(res)
          loading.close()
          var result = res.data.data
          var all = res.data.data.length
          console.log(all)
          var chartdatas = result
          var legenddata = []
          var piredata = []
          let centerNum01 = 0
          result.forEach((element) => {
            legenddata.push(element.key)
            centerNum01 = parseInt(element.allcount)
            piredata.push({ name: element.key, value: element.value })
          })

          const color = [
            '#66CCCC',
            '#CCFF66',
            '#FF99CC',
            '#FF9999',
            '#FFCC99',
            '#FF6666'
          ]
          const centerItem01 = '总量'

          var m2R2Data = [
            {
              value: 335,
              legendname: '西联支付',
              name: '西联支付 335',
              itemStyle: { color: '#1890FF' }
            },
            {
              value: 310,
              legendname: '好码齐',
              name: '好码齐  310',
              itemStyle: { color: '#F04864' }
            },
            {
              value: 234,
              legendname: '米亚',
              name: '米亚  234',
              itemStyle: { color: '#8543E0' }
            },
            {
              value: 154,
              legendname: '哆啦宝',
              name: '哆啦宝  154',
              itemStyle: { color: '#2FC25B' }
            },
            {
              value: 335,
              legendname: '翼支付',
              name: '翼支付  335',
              itemStyle: { color: '#FACC14' }
            },
            {
              value: 335,
              legendname: '信和支付',
              name: '信和支付 335',
              itemStyle: { color: '#13C2C2' }
            }

          ]


          var option = {
            title: [
              {
                text: '当月累计失败各通道占比',
                left: 20,
                // 原画标题调整
                textStyle: {
                  // 文字颜色
                  color: 'rgba(0, 0, 0, 0.85)',
                  // 字体风格,'normal','italic','oblique'

                  // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                  fontWeight: 'bold',
                  // 字体系列
                  fontFamily: 'sans-serif',
                  // 字体大小
                  fontSize: 16
                }
              },
              {
                text: '总额',
                subtext: all + '个',
                textStyle: {
                  fontSize: 14,
                  color: 'rgba(0, 0, 0, 0.45)'
                },
                subtextStyle: {
                  fontSize: 30,
                  color: 'rgba(0, 0, 0, 0.85)'
                },
                textAlign: 'center',
                x: '34.5%',
                y: '44%'
              }
            ],
            tooltip: {
              trigger: 'item',
              formatter: function(parms) {
                var str =
                  parms.seriesName +
                  '</br>' +
                  parms.marker +
                  '' +
                  parms.data.legendname +
                  '</br>' +
                  '数量：' +
                  parms.data.value +
                  '</br>' +
                  '占比：' +
                  parms.percent +
                  '%'
                return str
              }
            },
            legend: {
              type: 'scroll',
              orient: 'vertical',
              left: '70%',
              align: 'left',
              top: 'middle',
              textStyle: {
                color: '#8C8C8C'
              },
              height: 250,
              icon: 'circle'
            },
            series: [
              {
                name: "数据占比",
                type: 'pie',
                center: ['35%', '50%'],
                radius: ['50%', '65%'],
                clockwise: false, // 饼图的扇区是否是顺时针排布
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'outter',
                    formatter: function(parms) {
                      return parms.data.legendname
                    }
                  }
                },
                labelLine: {
                  normal: {
                    length: 5,
                    length2: 3,
                    smooth: true
                  }
                },
                data: m2R2Data// 虚拟数据
                // data:result  //真实数据
              }
            ]
          }
          thisobj.chart.setOption(option)
        },
        function(err) {}
      )
    }, 3 * 1000)
  }
}
</script>
<style lang="scss" scoped>
</style>
